<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动中心</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../../styles/common.css"/>
    <link rel="stylesheet" href="../../../styles/page.css"/>
    <link rel="stylesheet" href="../../../styles/bttn.min.css"/>

    <style>
        #member-app .notAdmin::after {
            border: 0 !important;
        }
    </style>
    <style lang="scss" scoped>
          .el-input__inner:focus{
            border-color: #002f64 !important;
            border-width: 1.5px !important;
            outline: 0 !important;
        }
    </style>
</head>
<body>
<div class="dashboard-container" id="activity-app">
    <div class="container">
        <div class="tableBar">
            <div class="infinite-list" v-infinite-scroll="load" style="overflow:auto;width: 1200px">
                <el-input v-model="input"
                          placeholder="请输入活动名称查看相关报名信息"
                          style="width: 300px;height: 50px;margin-left: 200px"
                          clearable
                          @keyup.enter.native="handleQuery"
                >
                    <i
                            slot="prefix"
                            class="el-input__icon el-icon-search"
                            style="cursor: pointer"
                            @click="handleQuery"
                    ></i>
                </el-input>
                <el-table
                        :data="tableData"
                        style="width: 60%;margin-left: 200px"
                        :header-cell-style="{background:'#eef1f6',color:'#606266',fontSize:'18px'}">
                    <el-table-column
                            label="学号"
                            prop="volunteer.volunteerStunum"
                            width="180">
                        <template slot-scope="scope">
                            <div style="font-size: 18px">
                                {{ scope.row.volunteer.volunteerStunum}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="姓名"
                            prop="volunteer.volunteerName"
                            width="180">
                        <template slot-scope="scope">
                            <div style="font-size: 18px">
                                {{ scope.row.volunteer.volunteerName}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="活动名称"
                            prop="activity.activityTitle"
                            width="180">
                        <template slot-scope="scope">
                            <div style="font-size: 18px">
                                {{ scope.row.activity.activityTitle}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="info" @click="dialogVisible = true"> 结 算 </el-button>
                            <el-dialog
                                    title="志愿时长结算"
                                    :visible.sync="dialogVisible"
                                    width="30%"
                                    append-to-body
                            >
                                <el-row style="margin-left: 30px">
                                    <span style="font-size: 20px;color: #002f64 ;font-family: '微软雅黑 Light';font-weight: bolder">
                                        增加志愿时长
                                    </span>
                                    <el-input-number v-model="serveTime" :step="0.5" :min="0.5" :max="5" style="margin-left: 30px">
                                    </el-input-number>
                                </el-row>
                                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleServeTime(scope.row.volunteer)">确 定</el-button>
                  </span>
                            </el-dialog>

                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>
<script src="../../../js/request.js"></script>
<script src="../../../api/activity.js"></script>
<script src="../../../api/volunteer.js"></script>
<script src="../../../api/match.js"></script>
<script>
    new Vue({
        el: '#activity-app',
        data() {
            return {
                input: '',
                counts: 0,
                page: 1,
                pageSize: 10,
                tableData: [],
                userId: '',
                searchName: '',
                serveTime: '',
                dialogVisible: false,

            }
        },
        computed: {},
        created() {
            if (window.localStorage.getItem('adminInfo') === null) {
                window.location.href = '../login/loginBackend.html'
            }
            this.init()
            this.userId = JSON.parse(localStorage.getItem('adminInfo')).id
        },
        mounted() {
        },
        methods: {
            async init() {
                const params = {
                    page: this.page,
                    pageSize: this.pageSize,
                    handlerId: JSON.parse(localStorage.getItem('adminInfo')).id,
                    searchName: this.input ? this.input : ''
                }
                await matchInfo(params).then(res => {
                    if (String(res.code) === '1') {
                        this.tableData = res.data.records || []
                        this.counts = res.data.total
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            handleServeTime(row) {
                const param = {
                    volunteerId: row.id,
                    volunteerServetime: this.serveTime,
                    stunum: row.volunteerStunum,
                    stuName: row.volunteerName
                }
                let strInfo = '确定给学号 '+ param.stunum + ' 姓名 '+param.stuName + ' 增加 '+param.volunteerServetime+ ' 小时志愿服务时长?'
                this.$confirm(strInfo,'提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const params = {
                        id: row.id,
                        volunteerTime: this.serveTime,
                    }
                    modifyInfo(params).then(res => {
                        if (String(res.code) === '1') {
                            this.$message({
                                type: 'success',
                                message: '操作成功!'
                            });
                        }
                        this.dialogVisible=false
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            handleQuery() {
                this.page = 1;
                this.init();
            },

            handleSizeChange(val) {
                this.pageSize = val
                this.init()
            },
            handleCurrentChange(val) {
                this.page = val
                this.init()
            },
            load() {

            },
            handleSelect(){},

        }
    })
</script>
</body>
</html>